<template>
  <el-card shadow='hover' border>
    <div>
      <el-row>
        <el-col :span='24'>
          <el-table :data='tableData' style='border:2px solid blue;overflow-x: scroll;' :cell-style='cellStyle'>
            <el-table-column prop='date' label='日期' width='180' align='center'></el-table-column>
            <el-table-column prop='content' label='内容' align='center'>
              <template v-slot='scope'>
                <el-input type='text' style='width:130px' v-model='scope.row.content'></el-input>
              </template>
            </el-table-column>
            <el-table-column prop='name' label='姓名' width='180' align='center' />
            <el-table-column prop='address' label='地址' width='180' :show-overflow-tooltip='true'
                             align='center'>
              <template v-slot='scope'>
                <span :class="scope.row.state === '0' ? 'colorStl' : 'colorStlNone' "> {{ scope.row.address }} </span>
              </template>
            </el-table-column>
            <el-table-column label='图片' prop='image' align='center'>
              <template v-slot='scope'>
                    <span v-for='(item,index) in scope.row.image' :key='index'>
                          <el-popover placement='left' trigger='click' width='260'>
                            <img :src='item' width='100%' />
                             <img
                               slot='reference'
                               :src='item'
                               :alt='item'
                               style='max-height: 70px;max-width: 70px; padding: 5px' />
                          </el-popover>
                    </span>
              </template>
            </el-table-column>
            <el-table-column prop='state' label='状态' align='center'>
              <template v-slot='scope'>
                {{ scope.row.state === '1' ? '正常' : '异常' }}
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </div>

    <el-button type='primary' @click='asyncLoad' style='margin-top:10px'>异步加载</el-button>
    <my v-if='isShow'></my>
    <!--在资源源代码时只有点击按钮才加载js文件-->


    <p>输入个数；</p>
    <el-input v-model='count' style='width:220px' />
    <el-button type='primary' @click='start'>开始</el-button>

    <el-tabs v-if='show' v-model='activeName' type='card' @tab-click='tabClick'>
      <el-tab-pane v-for='item in paneArr' :key='item.id' :label='item.label' :name='item.name'>
        <div :id='item.name' style='width:900px;height:300px;margin:0 auto'></div>
        <div class='textStl'>
          移动网络状态：0-异常，1-正常；移动网络类型：0-模块关闭，1-3G，2-4G，3-5G；网络信号强度：0-最弱，3-最强
        </div>
        <div :id='item.name' style='width:900px;height:300px;margin:0 auto'></div>
        <div class='textStl'>
          GPS天线状态：0-开路，1-短路，2-正常，3-保留；GPS星数等级：0-最少，3-最多
        </div>
      </el-tab-pane>

    </el-tabs>

    {{ d }}

  </el-card>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'test',
  components: {
    my: () => import ('@/views/my')
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      count: 3,
      myShow: false,
      show: false,
      content: '',
      paneArr: [],
      activeName: 'name0',
      cellStyle: function(row, column, rowIndex, columnIndex) {
        let style = { 'color': 'blue', 'font-weight': 'bold' }
        if (row.column.label === '状态') {
          // console.log('row:', row)
          return style
        }
      },
      d: 1
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      for (let i = 0; i < 4; i++) {
        this.tableData.push({
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            image: ['https://tupian.qqw21.com/article/UploadPic/2020-5/202051816522790516.jpg',
              'https://tupian.qqw21.com/article/UploadPic/2021-1/202111119351356686.jpg'],
            state: i % 2 ? '1' : '0'
          }
        )
      }

      console.log('dayjs():',dayjs().format('YYYYMMDDHHmmss'))

      this.d = dayjs()
      let str = '20230102065905'
      let k = dayjs(str).format('YYYYMMDDHHmmss')
      console.log('k:', k) //20230102065905
      let q = dayjs(k).add(10, 'second')
      console.log('q:', q)
      console.log(dayjs(q).format('YYYYMMDDHHmmss')) //20230102234605

      let s1 = dayjs('20230102065905').format('YYYYMMDDHHmmss')
      let s2 = '20230102070005'

      console.log(dayjs(s2).diff(s1, 'second'), '两个日期之间相差的秒数')
      let diff = dayjs(s2)
    },
    asyncLoad() {// sv
      this.isShow = !this.isShow
    },
    start() {
      if (this.count) {
        this.show = true
        this.paneArr = []
        for (let i = 0; i < this.count; i++) {
          this.paneArr.push({ id: i, label: '标签' + i, name: 'name' + i })
        }
        this.$nextTick(() => {
          this.showEcharts('name0')
        })
      }
    },
    tabClick(tab) {
      this.$nextTick(() => {
        this.showEcharts(tab.name)
      })
    },
    showEcharts(id) {
      console.log('需要渲染dom的id:', id)
      let myChart = this.$echarts.init(document.getElementById(id))

      let option = {
        backgroundColor: '#FBFBFB',
        tooltip: {
          show: true,
          trigger: 'axis', // item/axis/none
          formatter: function(data) {
            //  console.log(data)
            let str = data[0].name + '<br/>'
            data.forEach(item => {
              str += `${item.marker}${item.seriesName}: ${item.data} <br/> `
            })
            return str
          },
          axisPointer: { type: 'none' }
        },
        throttle: 100, // 刷新
        legend: {
          data: ['充值', '消费']
        },

        calculable: true,
        xAxis: [
          {
            axisLabel: {
              // rotate: 30,
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#CECECE'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: function() {
              let list = []
              for (let i = 10; i <= 18; i++) {
                if (i <= 12) {
                  list.push('2016-' + i + '-01')
                } else {
                  list.push('2017-' + (i - 12) + '-01')
                }
              }
              return list
            }()
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#CECECE'
              }
            }
          }
        ],
        series: [
          {
            name: '充值',
            type: 'line',
            symbol: 'none',
            smooth: 0.2,
            color: ['#66AEDE'],
            data: [800, 300, 500, 800, 300, 600, 500, 600]
          },
          {
            name: '消费',
            type: 'line',
            symbol: 'none',
            smooth: 0.2,
            color: ['#90EC7D'],
            data: [600, 300, 400, 200, 300, 300, 200, 400]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang='scss' scoped>

// 修改表格头部背景
::v-deep .el-table th {
  background: orange;
}

// 修改表格行
/deep/ .el-table tr {
  background: #eee;
}

// 修改斑马线表格
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: red;
}

// 修改表格悬浮的背景色
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: pink;
}

.textStl {
  height: 30px;
}

.colorStl {
  color: yellow;
}

.colorStlNone {

}

</style>